<template>
  <div class="textbook">
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="sMonitor">
        <span slot="label">
          <img src="../assets/stu/ico_word_blue.png"/>
          仿真监控
        </span>
        <div class="sim">
          <h2>1.下载连线图</h2>
          <div>
            连线图下载：<a :href="taskINFO.connectPhoto" download="photo.zip">点击下载</a>
          </div>
          <h2>2.打开桌面上的<a :href="'newlandedu://message/?user='+userIdd+'&practiceid='+practiceID">仿真软件</a>，并按照仿真实验步骤进行接线</h2>
          <div>
            <b>   仿真实验步骤：</b>
            <p v-html="taskINFO.simStep"></p>
          </div>
          <h2>3.查看任务状态</h2>
          <div>
            <el-button @click="freshStatus()">刷新状态</el-button>
          </div>
          <div class="task-state">
            任务状态：
          </div>
          <div class='sim-list' v-for="data in vData">
            <span v-if="data.status === 1 && data.name !== '截图'" style="color: green" ><i class="el-icon-success"></i>{{data.name}}: {{data.value}}</span>
            <span v-else-if="data.status === 0" style="color: red"><i class="el-icon-error"></i>{{data.name}}: {{data.value}}</span>
            <span v-else-if="data.status === 2" style="color: orange"><i class="el-icon-warning"></i>{{data.name}}: {{data.value}}</span>
            <span v-if="data.status === 1 && data.name === '截图'" style="float: right">
              <a :href="data.value" target="_blank" title="点击查看大图"><img width="148px" :src="data.value" alt="" height="148px"></a>
            </span>
          </div>
        </div>
        <h2>4.上传虚拟仿真连线图</h2>
        <div class="task-state">上传虚拟仿真图:</div>
        <el-upload
          :action="uploadURL"
          list-type="picture-card"
          :on-success="handleConnectSuccess"
          :on-preview="handlePictureCardPreview"
          >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" size="tiny">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <el-button @click="imageUpload()">确认上传</el-button>
        <h2>完成后，切换到<el-button @click="switchrMonitor()">实训监控</el-button></h2>
      </el-tab-pane>
      <el-tab-pane name="rMonitor">
        <span slot="label">
          <img src="../assets/stu/ico_video_blue.png"/>
          实训监控
        </span>
        <div class="real">
          <h2>1.根据连线图及虚拟仿真接线，进行实物连线。</h2>
          <h2>2.接线完成后，下载实训软件</h2>
          <div>
            实训软件下载：<a :href="taskINFO.real" download="realPack.zip">点击下载</a>
          </div>
          <h2>3.打开下载好的软件，根据实训实验步骤进行操作。</h2>
          <div>
            <b>实训实验步骤：</b>
            <p v-html="taskINFO.realStep"></p>
          </div>
          <h2>4.查看任务状态</h2>
          <div>
            <el-button @click="freshStatus()">刷新状态</el-button>
          </div>
          <div>
            任务状态：
          </div>
          <div v-for="data in rData">
            <span v-if="data.name === '错误'" style="color: red">{{data.name}}: {{data.value}}</span>
            <span v-else style="color: green">{{data.name}}: {{data.data}}</span>
          </div>
        </div>
        <h2>5.点击完成后，请填写实验报告</h2>
        <el-button  @click="tofinish">完成</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>
<script>
  import {getPubTask, verify, verifyr, updateStep, uploadURL, uploadSimImage, getUserAndTaskId} from '@/api/api'
  export default {
    data () {
      return {
        taskINFO: this.$store.state.taskINFO,
        uploadURL: uploadURL,
        userIdd: 123,
        practiceID: 1234,
        imageUrl: '',
        // simURL: '',
        // realURL: {
        //   data: ''
        // },
        taskId: '',
        rData: {},
        vData: {},
        activeName: 'sMonitor',
        dialogImageUrl: '',
        dialogVisible: false
      }
    },
    created () {
      this.initData()
      this.getUseridAndTaskid()
    },
    methods: {
      handlePictureCardPreview (file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      handleConnectSuccess (res, file) {
        this.imageUrl = res.name
      },
      async initData () {
        try {
          getPubTask().then((res) => {
            this.taskId = res.data.id
            this.getData(this.taskId)
            this.getrData(this.taskId)
            // this.simURL = res.data.simulation // type 看下转换下，通过store获取
            // this.realURL.data = res.data.real
          })
        } catch (err) {
          console.log('获取数据失败', err)
        }
        updateStep({step: 3}).then(res => {
        })
      },
      async freshStatus () {
        this.getData(this.taskId)
        this.getrData(this.taskId)
      },
      async switchrMonitor () {
        this.activeName = 'rMonitor'
      },
      async getData (id) {
        try {
          verify(id).then((res) => {
            this.vData = res.data.data
          })
        } catch (err) {
          console.log('获取数据失败', err)
        }
      },
      async getrData (id) {
        try {
          verifyr(id).then((res) => {
            this.rData = res.data.data
          })
        } catch (err) {
          console.log('获取数据失败', err)
        }
      },
      handleClick (tab, event) {
        if (tab.name === 'sMonitor') {
          this.$store.dispatch('updateStep', 3)
        } else {
          this.$store.dispatch('updateStep', 4)
        }
      },
      tofinish () {
        updateStep({step: 4}).then(res => {
        })
        this.$store.dispatch('updateStep', 5)
        this.$router.push({path: '/platform/myTask'})
      },
      imageUpload () {
        let postData = {
          imageUrl: this.imageUrl
        }
        uploadSimImage(postData).then(res => {
          if (res.status === 200) {
            this.$message({
              type: 'success',
              message: '上传成功'
            })
          } else {
            this.$message({
              type: 'error',
              message: '上传失败'
            })
          }
        })
      },
      getUseridAndTaskid () {
        getUserAndTaskId().then(res => {
          this.userIdd = res.data.data.user
          this.practiceID = res.data.data.practiceid
        }, res => {
          console.log(res.status)
        })
      }
    }
  }
</script>

<style lang="less">
  .textbook {
    .el-tabs__nav {
      width: 100%;
    }
    .el-tabs__item {
      width: 50%;
    }
  }
  .sim {
    .task-state {
      margin-top: 10px;
    }
    .sim-list {
      margin-top: 5px;
    }
  }
</style>


